<template>
  <div class="content">
    <!-- 摄像头扫码识别 -->
    <qr-stream @decode="onDecode" class="mb">
      <div style="color: red" class="frame"></div>
    </qr-stream>

    <!-- 上传图片识别二维码 
    <qr-capture @decode="onDecode" class="mb">
      <div style="color: red" class="frame"></div>
    </qr-capture>
    -->

    <span>将二维码放入框内，即可自动扫描</span>
    {{ state.data }}
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { QrStream, QrCapture, QrDropzone } from "vue3-qr-reader";

const state = reactive({ data: null });

function onDecode(data) {
  state.data = data;
}
</script>
